<template>
  <div class="main">
      <div class="title">
        <div class="img">
          <img src="../assets/title.png" alt="">
        </div>
        <h5>
          上市公司单位列表
        </h5>
      </div>
      <div class="content">
        <el-table
          :data="tableData"
          stripe
          :header-cell-style="{background:'#F1F3F7'}"
          style="width: 100%">
          <el-table-column
            type="index"
            label="序号"
            width="50">
          </el-table-column>
          <el-table-column
            label="单位名称"
            width="250">
            <template slot-scope="scope">
              <router-link :to="{name:'content',params:{scc:scope.row.SCC,img:scope.row.IMGURL}}" style="color: #2A87FF;">{{ scope.row.COMPANYNAME }}</router-link>
              <!-- <span style="margin-left: 10px">{{ scope.row.name }}</span> -->
            </template>
          </el-table-column>
          <el-table-column
            prop="ASTOCK_CODE"
            label="A股代码"
            width="130">
          </el-table-column>
          <el-table-column
            prop="ASTOCK_CN"
            label="A股简称"
            width="130">
          </el-table-column>
          <el-table-column
            prop="TVALUE"
            label="总市值"
            width="130">
          </el-table-column>
          <el-table-column
            prop="TOTAL_REVENUE"
            label="总收入(万元)">
          </el-table-column>
          <el-table-column
            prop="NET_PROFIT_ATSOPC"
            label="净利润(万元)">
          </el-table-column>
          <el-table-column
            prop="WGT_AVG_ROE"
            label="加权净资产收益率(%)"
            width="170">
          </el-table-column>
          <el-table-column
            prop="TVALUEP"
            label="市盈率PE(TTM)"
            width="130">
          </el-table-column>
          <el-table-column
            prop="TIMESHOWGPX"
            label="数据更新时间"
            width="170">
          </el-table-column>
        </el-table>
      </div>
  </div>
</template>

<script>
import {reqListAll} from '../api/index'
export default {
  data() {
    return {
      tableData: [{
        num: '1',
        name: '雪天盐业集团股份有限公司',
        Agud: '600929',
        Aguj: '雪山盐业',
        zsz: '200,000.00',
        zsr: '160,000.00',
        jlr: '149,068.00',
        ROE: '68.17%',
        syl: '87.92',
        gq: '2022-05-10 15:00:00'
      },
      {
        num: '1',
        name: '雪天盐业集团股份有限公司',
        Agud: '600929',
        Aguj: '雪山盐业',
        zsz: '200,000.00',
        zsr: '160,000.00',
        jlr: '149,068.00',
        ROE: '68.17%',
        syl: '87.92',
        gq: '2022-05-10 15:00:00'
      },
      {
        num: '1',
        name: '雪天盐业集团股份有限公司',
        Agud: '600929',
        Aguj: '雪山盐业',
        zsz: '200,000.00',
        zsr: '160,000.00',
        jlr: '149,068.00',
        ROE: '68.17%',
        syl: '87.92',
        gq: '2022-05-10 15:00:00'
      },
      {
        num: '1',
        name: '雪天盐业集团股份有限公司',
        Agud: '600929',
        Aguj: '雪山盐业',
        zsz: '200,000.00',
        zsr: '160,000.00',
        jlr: '149,068.00',
        ROE: '68.17%',
        syl: '87.92',
        gq: '2022-05-10 15:00:00'
      },
      {
        num: '1',
        name: '雪天盐业集团股份有限公司',
        Agud: '600929',
        Aguj: '雪山盐业',
        zsz: '200,000.00',
        zsr: '160,000.00',
        jlr: '149,068.00',
        ROE: '68.17%',
        syl: '87.92',
        gq: '2022-05-10 15:00:00'
      },
      {
        num: '1',
        name: '雪天盐业集团股份有限公司',
        Agud: '600929',
        Aguj: '雪山盐业',
        zsz: '200,000.00',
        zsr: '160,000.00',
        jlr: '149,068.00',
        ROE: '68.17%',
        syl: '87.92',
        gq: '2022-05-10 15:00:00'
      },
      {
        num: '1',
        name: '雪天盐业集团股份有限公司',
        Agud: '600929',
        Aguj: '雪山盐业',
        zsz: '200,000.00',
        zsr: '160,000.00',
        jlr: '149,068.00',
        ROE: '68.17%',
        syl: '87.92',
        gq: '2022-05-10 15:00:00'
      }]
    }
  },
  mounted(){
    this.getAllList('canshu')
  },
  methods:{
    async getAllList(params){
      const result = await reqListAll(params)
      if(result.Code === '1'){
        this.tableData = result.Content
      }
    },
    toContent(SCC){
      this.$router.push({
        name:'content',
        params:{
          scc:SCC
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
.main {
  background-color: rgb(239,242,244);
  height: 100vh;
  // width: 100%;
  padding: 0 10px;
  .title {
    display: flex;
    align-items: center;
    height: 5%;
    .img {
      width: 36px;
      height: 36px;
      margin-right: 10px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    h5 {
      font-family: PingFangSC-Medium;
      font-size: 20px;
      color: rgba(0,0,0,0.85);
      letter-spacing: 0;
      line-height: 20px;
    }
  }
  .content {
    // height: 92%;
    background-color: white;
    border-radius: 10px;
    padding: 1%;
    h4 {
      font-family: PingFangSC-Medium;
      font-size: 18px;
      color: rgba(23,34,63,0.85);
    }
  }
}
//修改table偶数栏颜色
/deep/ .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
  background: #F7F8FB;
}
/deep/ .el-table tbody tr:hover>td {
background: rgb(219,233,255)!important;
}

</style>